<template>
  <el-dialog
    :title="!agentsForm.id ? '添加经纪' : '编辑经纪'"
    :visible="isShow"
    @close="closeDialog"
  >
    <el-form :model="agentsForm" :rules="rules">
      <el-form-item label="名称" prop="name" label-width="50px">
        <el-input v-model="agentsForm.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="邮箱" label-width="50px" prop="email">
        <el-input v-model="agentsForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="电话" label-width="50px" prop="phone">
        <el-input v-model.number="agentsForm.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="地址" label-width="50px" prop="address">
        <el-input v-model="agentsForm.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="描述" prop="desc" label-width="50px">
        <el-input
          v-model="agentsForm.desc"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 3 }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="照片" label-width="50px">
        <!-- 上传图片组件 -->
        <updateImage ref="agentsUpdat" />
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { addAgentsNum, undateAgents } from '@/api/agents'
import updateImage from '@/components/updateImage'
import { validateEmail, validateMobile } from '@/utils/validate'
console.log(validateEmail().test('123@qq.com'))
export default {
  components: {
    updateImage
  },
  props: {
    isShow: {
      type: Boolean
    },
    // eslint-disable-next-line vue/require-default-prop
    getAgentsList: {
      type: Function
    },
    // eslint-disable-next-line vue/require-default-prop
    getAgentsNum: {
      type: Function
    }
  },
  data() {
    return {
      agentsForm: {
        name: '', // 经纪名称
        email: '', // 电子邮箱，比如 example@qq.com
        phone: '', // 电话
        address: '', // 地址
        desc: '', // 描述
        image: '' // 封面图
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '名称最2~6位合法字符串', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern: validateEmail(), message: '请输入xxx@xxx.xxx格式的邮箱', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { pattern: validateMobile(), type: Number, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        desc: [{ required: true, message: '描述不能为空', trigger: 'blur' }]

      }
      // fileList: []
    }
  },
  watch: {
    'agentsForm.image'(newVal) {
      console.log(newVal)
      // 回显照片
      this.$refs.agentsUpdat.fileList = [{ url: newVal }]
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:isShow', false)
    },

    // 点击确定添加或编辑
    async btnOk() {
      try {
        // 没有id就是添加
        console.log(this.$refs.agentsUpdat)
        if (!this.agentsForm.id) {
          this.agentsForm.image = this.$refs.agentsUpdat.imageUrl
          await addAgentsNum(this.agentsForm)
        } else {
          this.agentsForm.image = this.$refs.agentsUpdat.imageUrl
          await undateAgents(this.agentsForm)
        }
        this.closeDialog()
      } catch {
        this.$message.error('处理失败！')
      }
      await this.getAgentsList()
      await this.getAgentsNum()
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-textarea__inner {
  resize: none;
}
</style>
